<template>
  <div class="console-main" style="position:fixed;bottom: 0px;right: 0px;">
    <div class="title">
      集群控制台
    </div>
    <div class="clear-all">
      <div style="display: flex">
        <a-tooltip>
          <template slot="title">
            清空控制台
          </template>
          <a-icon @click="clearAll" type="delete" />
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            跳转到底部
          </template>
          <a-icon @click="gotoBottom" type="caret-down" style="margin-left: 5px;" />
        </a-tooltip>
      </div>

    </div>
    <div class="content" id="content">
      <div id="content-container">
        <div v-for="i in this.$store.state.msg" class="msg">
          {{i}}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import wsEvents from "../wsEvents";

export default {
  name: "LogMenu",
  data(){
    return {
      msg:[]
    }
  },
  created() {
    app.register(wsEvents.events.ON_PUSH_TASK,(msg)=>{
      this.console("主节点:向目标节点"+msg["descIp"]+"推送了任务"+"任务编号:"+msg["taskId"])
    })
    app.register(wsEvents.events.ON_LOG,(msg)=>{
      this.console(msg)
    })
  },
  methods:{
    console(msg){
      this.$store.state.msg.push(msg);
    },
    clearAll()
    {
      this.$store.state.msg = [];
    },
    gotoBottom()
    {
      let ele = document.querySelector("#content")
      ele.scrollTop =  document.querySelector("#content-container").offsetHeight;
    }
  }
}
</script>

<style scoped>
.clear-all{
  position: absolute;
  right: 35px;
  color: white;
  font-size: 20px;
  top: 0;
}
.clear-all i{
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
.clear-all i:hover{
  cursor: pointer;
  transform: scale(1.5);
  color: royalblue;
}
.console-main .content{
  position: relative;
  width: 400px;
  height: 300px;
  overflow: scroll;
  padding: 10px 10px;
  background-color: rgba(59, 45, 45, 0.22);
}
.title{
  color: white;
  text-align: center;
}
.console-main .content::-webkit-scrollbar { width: 0 !important }
.console-main .content .msg{
  word-break:break-all;
  position: relative;
  width: 90%;
  left: 5px;
  color: white;
  text-align: left;
  border: 1px solid #2c3e50;
  padding: 5px 5px;
  border-radius: 2px;
  font-size: 12px;
  margin-top: 5px;
  animation: showMsg 0.5s ease-in-out;
}
@keyframes showMsg {
  0%{left: -100px}
  100%{left :5px}
}
</style>
